import moment from 'moment';
import React, { Component } from 'react';
import { Form, Row, Col, message, DatePicker } from 'antd';
import StaticEditTable from '../Common/CommonTable'; /* 可编辑表格 */
import * as commonBusiness from '../Common/commonBusiness'; /* 单据业务功能 */
import styles from '../../index.less';
import * as commonConfig from '../../utils/config';
import * as commonServices from '../../services/services';

const FormItem = Form.Item;

class TabFinancePeriodComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      mode: 'year',
      open: false,
      value: moment(new Date().getFullYear().toString(), 'YYYY'), /* 年份 */
    };
  }
  handleOpenChange = (open) => {
    if (open) {
      this.setState({ mode: 'year', open: true });
    }
  };

  handlePanelChange = async (value, mode) => {
    const bFilterValue = moment(value).format('YYYY');
    this.setState({ mode, open: false, value });
    const {
      token, sModelsId, sysaccountperiodConfig, masterConfig,
    } = this.props;
    const condition = {
      sSqlCondition: {
        sParentId: masterConfig.sId,
      },
      bFilter: [{
        bFilterName: 'sPeriodId',
        bFilterValue,
        bFilterCondition: 'like',
      }],
    };
    const configDataId = sysaccountperiodConfig.sId;
    const dataUrl = `${commonConfig.server_host}business/getBusinessDataByFormcustomId/${configDataId}?sModelsId=${sModelsId}`;
    const dataReturn = (await commonServices.postValueService(token, condition, dataUrl)).data;
    if (dataReturn.code === 1) {
      const returnData = dataReturn.dataset.rows[0].dataSet;
      this.props.onSaveState({ sysaccountperiodData: returnData });
    } else {
      message.error(dataReturn.msg);
    }
  };
  render() {
    const { open, value, mode } = this.state;
    const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 15 } };
    return (
      <FormItem className={styles.searchSlaveForm}>
        <div className={styles.tableOptionSys}>
          <Row style={{ marginBottom: 30 }}>
            <Col span={24}>
              <Col span={6}>
                <FormItem
                  {...formItemLayout}
                  label="年度"
                >
                  <DatePicker
                    format="YYYY"
                    open={open}
                    value={value}
                    mode={mode}
                    onOpenChange={this.handleOpenChange}
                    onPanelChange={this.handlePanelChange}
                  />
                </FormItem>
              </Col>
            </Col>
          </Row>
          <StaticEditTable {...commonBusiness.getTableTypes('sysaccountperiod', this.props)} />
        </div>
      </FormItem>
    );
  }
}

export default TabFinancePeriodComponent;

